<template>
  <view class="home">
    <!-- 导航栏 -->
    <uni-nav-bar fontSize="60" backgroundColor="none" :shadow="false" leftWidth="250rpx" rightWidth="250rpx"
      :border="false">
      <block slot="left">
        <image class="homehl-img" src="@/static/images/homehl.png" mode="widthFix"></image>
      </block>
      <view class="uni-title">标题栏</view>
      <block slot="right">
        <view class="nav-location" @click="handLocation">
          <image class="location-img" src="@/static/images/location.png" mode="widthFix"></image>
          <view class="location-text">北京</view>
        </view>
      </block>
    </uni-nav-bar>
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
  </view>
</template>
<script>


export default {
  data() {
    return {
      banner01: require('@/static/images/banner/banner01.jpg'),
      homehlImg: require('@/static/images/homehl.png'),
      current: 0,
      swiperDotIndex: 0,
      data: [{
        image: this.homehlImg
      },
      {
        image: this.banner01
      },
      {
        image: this.banner01
      }
      ]
    }
  },
  onLoad() {
  },
  methods: {
    handLocation() { },
    clickBannerItem(item) {
      console.info(item)
    },
    changeSwiper(e) {
      this.current = e.detail.current
    },

  }
}
</script>

<style lang="scss">
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #fff url('~@/static/images/homebg.png');
  min-height: 100%;
  height: auto;
  background-size: cover;
  background-position: center;
}

.home {
  /* display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; */
}

.homehl-img {
  width: 85rpx;
  height: 39rpx;
}

.uni-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #000000;
  line-height: 88rpx;
}

.nav-location {
  display: flex;
  align-items: center;

  .location-img {
    width: 17rpx;
    height: 20rpx;
  }

  .location-text {
    font-size: 22rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #000000;
    margin-left: 5rpx;

  }
}

view {
  font-size: 14px;
  line-height: inherit;
}

/* #endif */

.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

.swiper {
  height: 300rpx;
}

.swiper-box {
  height: 150px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 300rpx;
  line-height: 300rpx;
}

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    /* #ifndef APP-NVUE */
    margin: 0 auto;
    /* #endif */
    margin-top: 8px;
  }

  .image {
    width: 100%;
  }
}
</style>
